<template>

    <div class="content">
        <mt-header fixed title="手机app" >
            <span slot="left"  v-show="show" @click="ss">
                <mt-button icon="back">返回</mt-button>
            </span>
        </mt-header>

		<transition name="my">
			<router-view></router-view>
		</transition>
		
        <nav class="mui-bar mui-bar-tab">
			<router-link to="/home" class="mui-tab-item " >
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link to="/member" class="mui-tab-item" >
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">会员</span>
			</router-link>
			<router-link to="/cart" class="mui-tab-item">
				<span class="mui-icon-extra mui-icon-extra-cart mui-icon" id="cartps"><span class="mui-badge">{{getTotal}}</span></span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link to="/setUp" class="mui-tab-item" >
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</router-link>
		</nav>
	</div>
</template>
<script>
import { mapGetters} from 'vuex'
export default {
	data(){
		return {show:true}
	},
	methods:{
		ss(){
			//点击返回按钮，会返回上一步
			this.$router.go(-1);
		
		}
	},
	created() {
		if( this.$route.path==="/home")
		{
			this.show=false;
		}else{
			this.show=true;
		}
	},
	watch:{
		"$route.path":function(newV,oldv){
			if(newV==="/home"){
				this.show=false
			}else{
				this.show=true;
			}
		}
	},
	computed:{
		...mapGetters(['getTotal'])
	}

}
</script>
<style>
#cartps{
	font-family: MuiiconSpread;
}
.imglist .my-gallery
{   
    display: flex;
    flex-wrap:wrap;
                              
}
  figure img{
         width: 100%;
        box-shadow: 0 0 8px #999;
        border-radius: 5px;
}
.my-gallery figure{

		margin: 5px; 
		}   

figure img{
    margin: 10px;
    box-shadow: 0 0 7px grey;
    width: 100px;
    height: 100px;
}
.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			 img {
				max-width: 100%;
				height: auto;
			}
			
.content{
	width: 100%;
	overflow: hidden;
	background-color: #fff;	
	padding-bottom: 40px;
}
.hcontent{
	margin-top: 40px;
	width: 100%;
}
.my-enter{
	opacity: 0;
	transform: translateX(100%);
}
.my-leave-to{
	opacity: 0;
	transform: translateX(-100%);
	position: absolute;
}
.my-enter-active,.my-leave-active{
	transition: all .5s ease;

}
</style>